html, body {height:100%;padding: 0; /*margin: 10px auto;min-width: 780px;max-width: 1260px;width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");*/}
#superContainer { height: 100%; position: relative; }
.section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;overflow: hidden; }

#menu { position: fixed; right: 0px; top: 20%; z-index: 10; list-style-type: none;display:none;}
#menu li { width: 20px; margin-top: 10px; overflow: hidden;}
#menu li a{ width:8px; height:8px; background:#999999; display:block; overflow: hidden; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%;}
#menu li.active a{ background:#2d97fa}

@-webkit-keyframes rod {
	0% {
	    opacity: 0;
		padding-left: 0px;
	}
	85% {
	    opacity: 1;
		padding-left: 1.5px;
	}
	100% {
	    opacity: 1;
		padding-left: 2px;
	}
	+3+36
}

.pub-passdown{
	background:url(../img/godown.png) no-repeat center center;
	position:absolute;
	width:100px;
	height:30px;
	bottom:10%;
	left:50%;
	margin-left:-50px;
	animation: animatedOpacity 4s linear infinite;
}
.pub-passdown a{ display:block; width:100%; height:100%;}
@keyframes animatedOpacity {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

.section1 { background: url(../img/logo.png) center 80px no-repeat;vertical-align:middle;overflow: hidden; text-align:center; animation: animatedBackground 0.4s linear infinite; }
@keyframes animatedBackground {
  0% { background-position: center 40px; }
  50% { background-position: center 50px; }
  100% { background-position: center 40px; }
}
.logo{ opacity: 0;position: absolute; top:46%; right:0; bottom:0; left:50%; margin:0 auto; width:100px; margin-left:-50px; margin-top:-210px; }
.active .logo{
  opacity: 1;
  top:55%;
  -webkit-animation-name: fadeInRight;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		top:46%;
	}
	50% {
		opacity: 0.5;
		top:60%;
	}
	100% {
		opacity: 0.8;
		top:55%;
	}	
}

/**/
*{ list-style:none; padding:0; margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover{text-decoration:none}
body{ max-width:1260px; margin:0 auto;}
.section { position:relative;}
.section ul{}
.section li{ float:left; width:25%; overflow:hidden; position:absolute; height:100%; margin-left:-25px;margin-top:-50px; top:35%;}
.section li .pageItem{ padding:0 10%; text-align:center;}

.section2 li .pageItem .page_img img{ width:100%; max-width:350px;}
.section2 li .pageItem .page_name{ color:#2d98fa; overflow:hidden; margin-top:0%; position:relative; padding-top:10%;}
.section2 li .pageItem .page_name h2{ font-size:24px; font-weight:normal; height:30px; line-height:30px; overflow:hidden;}
.section2 li .pageItem .page_name p { font-size:16px; margin-top:10%; height:40px; line-height:20px; overflow:hidden;}

.section2 .part1{left:10%;}
.section2 .part2{left:32%;}
.section2 .part3{left:54%;}
.section2 .part4{left:76%;}

.section3 li .pageItem { height:50%}
.section3 li .pageItem .page_img{ text-align:center; width:200px; height:200px; line-height:0; margin:0 auto; overflow:hidden; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%;}
.section3 li .pageItem .page_img img{ max-width:200px; width:100%}
.section3 li .pageItem .page_name{ color:#333333; overflow:hidden; margin-top:0%; padding-top:10%;}
.section3 li .pageItem .page_name h2{ font-size:16px; font-weight:normal; height:30px; line-height:30px; overflow:hidden;}
.section3 li .pageItem .page_name p { font-size:16px; margin-top:10%; height:40px; line-height:20px; overflow:hidden;}

.section3 .part1{left:10%;}
.section3 .part2{left:32%;}
.section3 .part3{left:54%;}
.section3 .part4{left:76%;}

.section4 dl{ width:760px; height:240px; position:absolute; top:50%; left:50%; margin:-120px 0 0 -380px ;}
.section4 dl dt{ width:200px; float:left; margin-right:160px; text-align:center; font-size:30px; color:#2d98fa;}
.section4 dl dt p{ height:30px; line-height:30px; overflow:hidden;}
.section4 dl dd{ width:400px; float:left;}
.section4 dl dd div{ margin-bottom:40px}
.section4 dl dd img{ width:100%; max-width:400px;}
.section4 dl dd div {
  -webkit-animation-name: textFont;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-iteration-count: 1;
}

.copyright{
  position: absolute;
  width:80%;
  padding: 0 10%;
  bottom:2%;
  left: 0%;
  text-align: center;
  line-height: 2;
  font-size:10px;
  color: #999;
}

.active .pageItem .page_name{
  opacity: 1;
  position:relative;
  -webkit-animation-name: xiaoguo;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes xiaoguo {
	0% {
	    opacity: 0;
		margin-top: 20%;
	}
	50% {
	    opacity: 1;
		margin-top: 60%;
	}
	100% {
	    opacity: 0.8;
		margin-top: 0%;
	}
}
@-webkit-keyframes textFont {
	0% {
	    opacity: 0;
	}
	50% {
	    opacity: 0.5;
	}
	100% {
	    opacity: 1;
	}
}

@media screen and (max-width: 800px) {
	.section3 li .pageItem .page_img{ width:120px; height:120px;}
	.section4 dl{ width:640px; margin-left:-320px;}
	.section4 dl dt{ margin-right:40px;}
	.section4 dl{ transform:scale(0.8)}
}
@media screen and (max-width: 640px) {
	.section li .pageItem .page_name{ margin-top:0%;}
	.section li .pageItem .page_name h2{ font-size:14px;}
	.section li .pageItem .page_name p { font-size:11px; margin-top:0%; line-height:14px; height:56px;}
	
	.section1{ background-size:120px;}
	.active .logo img{ width:50%;}
	.section3 li{ width:50%;}
	.section3 li .pageItem .page_name p{ padding-top:10px;}
	.section3 li{ transform:scale(0.5); top:20%; margin-left:-20%;}
	.section3 li .pageItem .page_name h2{ font-size:28px;}
	.section4 dl{ transform:scale(0.5)}
}
@media screen and (max-width: 420px) {
	#menu li a{ width:6px; height:6px;}
	.section1{ background-position:center 40px;}
	.active .logo{ top:76%}	
	@-webkit-keyframes fadeInRight {
		0% {
			opacity: 0;
			top:46%;
		}
		50% {
			opacity: 0.5;
			top:90%;
		}
		100% {
			opacity: 0.8;
			top:76%;
		}
	}
}
/**/




